<template>
  <div>
    <div class="package">
      <input type="text" class="txt" v-model="title" placeholder="输入用户名进行搜索">
      <button @click="searchPosts(title)" class="btn">SEARCH</button>
    </div>
    <div class="table">
      <table class="blog-table">
        <thead>
        <tr>
          <th>Title</th>
          <th>Content</th>
          <th>Create Time</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="blog in blogs" :key="blog.id">
          <td>
            <div style="height: 50px;width: 100px; overflow: hidden;">
              <router-link :to="{ name: 'BlogDetail', params: { id: blog.id } }">{{ blog.title }}</router-link>
            </div>
          </td>
          <td>
            <div style="height: 50px;width: 200px; overflow: hidden;">{{ blog.content }}</div>
          </td>
          <td>
            <div style="height: 50px;width: 200px; overflow: hidden;">{{ blog.createDate }}</div>
          </td>
          <td><button @click="deletePost(blog.id)" class="btn">删除</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      blogs: [],
      title: ''
    };
  },
  mounted() {
    this.getBlogData();
  },
  methods: {
    getBlogData() {
      axios.get('/api/backend')
          .then(response => {
            this.blogs = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    searchPosts(title) {
      axios.get(`/api/posts?title=${title}`)
          .then(response => {
            if (response.data === null) {
              alert("查询无结果");
            } else {
              this.blogs = response.data;
            }
          })
          .catch(error => {
            console.error(error);
          });
    },
    deletePost(id) {
      const r = confirm("确定要删除吗？");
      if (r==true){
        axios.delete(`/api/posts/${id}`)
            .then(response => {
              console.log(response.data);
              this.getBlogData();
            })
            .catch(error => {
              console.error(error);
            });
      }
      else{
        return
      }
    },
  },
};
</script>
<style>
.package{
  display: block;
  text-align: center;
  margin-bottom: 54px;
}
.txt{
  width: 215px;
  height: 25px;
  outline: none;
  border:0;
  border-radius: 5px;
  background:#d1d2d4;

}
.btn{
  width:65px;
  height: 35px;
  background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
  border-radius: 5px;
}
.btn:hover{
  cursor: pointer;
  background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
}
.table{
  margin-top:100px;
}
.blog-table {
  width: 100%;
  border-collapse:separate;
  border-spacing:4px;
}

.blog-table td {
  padding: 12px;
  text-align:left;
  border:0;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
}

.blog-table th {
  padding: 12px;
  text-align: center;
  border:0;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
  background:linear-gradient(90deg, #d1d2d4,#73f219,#000000);
  color-image:#fff;
  font-family: Papyrus;
}

.blog-table tbody tr:hover {
  background-color: #fff;
}
</style>
